<script setup lang='ts'>
import { useStoreDict } from '@/store/modules/dict'
import { useMessageBadgeStore } from '@/store/modules/message-center'
import { Search } from '@element-plus/icons-vue'
import { useGetMessagePage, useGetReadMessage } from '@fl/api/man-api/message-center'
import { cloneDeep } from 'lodash-es'
import { computed, ref } from 'vue'

import ListItem from './list.vue'

const { dicts, init } = useStoreDict()
init(['jc_message_type'])

const messageType = ref('999')
const form = ref({ keyword: '', type: '1' })
const list = ref([])
const listRef = ref()
// const isAll = ref(true)

const selected = ref([])

const initPage = { page: 1, size: 10, total: 0 }
const pageInfo = ref<any>(cloneDeep(initPage))

const params = computed(() => ({
    content: form.value.keyword,
    messageType: messageType.value === '999' ? '' : messageType.value,
    page: pageInfo.value.page,
    size: pageInfo.value.size,
}))

const { data, isLoading, refetch } = useGetMessagePage(params)

const options = computed(() => {
    const target = dicts?.jc_message_type ?? []
    return [
        {
            label: '全部',
            value: '999',
        },
        ...target,
    ]
})

const opts = [
    {
        label: '信息内容',
        value: '1',
    },
]

function search() {
    refetch()
}

function change() {

}

function pageChange(val: any) {
    pageInfo.value.page = val.page
    pageInfo.value.size = val.size
}

// function checkAll() {
//     listRef.value.checkAll(isAll.value)
//     isAll.value = !isAll.value
// }

function selectChange(val: any) {
    selected.value = val
}

const { initBadge } = useMessageBadgeStore()

// 全部标记已读
const { mutate } = useGetReadMessage()
function doRead() {
    mutate({}, {
        onSuccess: () => {
            ElMessage.success('操作成功')
            refetch()

            initBadge()
        },
    })
}

watchEffect(() => {
    if (data.value) {
        const { records, total } = data.value
        pageInfo.value.total = total
        list.value = records ?? []
    }
})
</script>

<template>
    <ElCard class="mb-20">
        <div class="mb-20 text-20 font-600">
            消息中心
        </div>

        <div class="flex flex-wrap items-center">
            <span>消息类型：</span>

            <el-select v-model="messageType"
                       placeholder="请选择消息类型"
                       style="width: 240px"
            >
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                />
            </el-select>
        </div>
    </ElCard>

    <ElCard v-loading="isLoading"
            class="mb-20"
    >
        <div class="mb-20 flex justify-between items-center">
            <div class="flex">
                <!-- <el-button @click="checkAll">{{ isAll?'全选':'全不选' }}</el-button> -->
                <el-button @click="doRead">
                    全部标记为已读
                </el-button>
            </div>

            <el-input v-model.trim="form.keyword"
                      clearable
                      placeholder="请输入消息标题或内容"
                      class="search-input"
                      maxlength="10"
                      @input="change"
            >
                <template #prepend>
                    <el-select v-model="form.type"
                               style="width: 100px"
                    >
                        <el-option v-for="item in opts"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"
                        />
                    </el-select>
                </template>

                <template #append>
                    <el-button :icon="Search"
                               @click="search"
                    />
                </template>
            </el-input>
        </div>

        <ListItem ref="listRef"
                  :data="list"
                  :total="pageInfo.total"
                  @select-change="selectChange"
                  @page-change="pageChange"
        />
    </ElCard>
</template>

<style lang="less" scoped>
.search-input {
    width: 400px;

    .el-input-group__prepend {
        .el-select {
            height: 100%;
            background: #fff;

            :deep(.el-select__wrapper) {
                height: 100%;
            }
        }
    }

    :deep(.el-input-group__append) {
        background: #da0004;
        height: 40px;
        width: 40px;

        .el-button--default {
            color: #fff;
        }
    }
}
</style>
